<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/personal center.css" />
		<script src="../js/rem.js" charset="UTF-8"></script>
	</head>
	<body>
		<div class="malogin">
			<!--头部-->
			<div class="close clearfix">
				<a href="javascript:void(0)" class="iconfont icon-close-b"></a>
			</div>
			<!--内容填写部分-->
			<div class="maloginnr">
				<!--个人中心-->
				<div class="zhuren">
					<div class="fixHeight">
						<img src="../img/head_portrait.png" alt="grtouxiang" />
					</div>
					<dl class="per">
						<dd>
							<span>太君</span>
							<a href="javascript:void(0)">个人中心<i class="iconfont icon-dropright"></i></a>
						</dd>
						<dd>
							<p class="iconfont icon-xingxing_xuanzhong"></p>
							<p class="iconfont icon-xingxing_xuanzhong"></p>
							<p class="iconfont icon-xingxing_xuanzhong"></p>
					    </dd>
					    <dd>
							<a href="javascript:void(0)">关注 <span>36</span></a>
							<a href="javascript:void(0)">粉丝 <span>208</span></a>
					    </dd>
					    <dd>
					    	<button class="active">我的收藏</button>
					    	<button>我的发布</button>
					    </dd>
				    </dl>
					
				</div>
				<!--小分支-->
				<div class="sort clearfix">
					<a href="javascript:void(0)">
						<span>GIMC</span>
						<i class="iconfont icon-dropright"></i>
					</a>
					    <div class="kg">
					    	<a href="javascript:void(0)">省广介绍</a>
					    	<a href="javascript:void(0)">新闻资讯</a>
					    </div>
					<a href="javascript:void(0)">
						<span>文章</span>
						<i class="iconfont icon-dropright"></i>
					</a>
						<div class="kg">
					    	<a href="javascript:void(0)">省广介绍</a>
					    	<a href="javascript:void(0)">新闻资讯</a>
					    </div>
					<a href="javascript:void(0)">
						<span>资源</span>
						<i class="iconfont icon-dropright"></i>
					</a>
					    <div class="kg">
					    	<a href="javascript:void(0)">省广介绍</a>
					    	<a href="javascript:void(0)">新闻资讯</a>
					    </div>
					<a href="javascript:void(0)">
						<span>课程</span>
						<i class="iconfont icon-dropright"></i>
					</a>
						<div class="kg">
					    	<a href="javascript:void(0)">省广介绍</a>
					    	<a href="javascript:void(0)">新闻资讯</a>
					    </div>
				</div>
			    <!--退出登录-->
			    <div class="exit">
			    	<button>退出</button>
			    </div>
			</div>

		</div>
		<script src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
		   //1.获取元素
		     var kaiguan = document.querySelector(".kg");
		     var baba = document.querySelector(".sort>a");
		     var isBlock = false;
		   //2.添加事件(点击,鼠标)
		     baba.addEventListener("click",function(){
		      //3.控制变量
		      if(!isBlock) {
		         kaiguan.style.display="none";
		         isBlock=true;
		      }else{
		         kaiguan.style.display="block"
		         isBlock=false;      
		      }  
		     }) 
		     
		     
		     function tabs(){
				 var a = document.querySelectorAll(".sort>a");
					   var div = document.querySelectorAll(".kg");
					   console.log(a);
					   console.log(div);
					   for(let i=0;i<a.length;i++){
						   	 a[i].addEventListener("click",function(){
						   	 	div[i].classList.add("ddshow");
						   })
					   }
			//		   li[0].addEventListener("click",function(){
			//		   })
			         
			        
			}
				 tabs();
		   </script>
	</body>

